<%--
  Created by IntelliJ IDEA.
  User: SYHT
  Date: 2017/7/5
  Time: 17:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--解析表达式--%>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>

    <jsp:include page="distforeEnd.jsp"/>
    <%--<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>--%>
    <script src="${pageContext.request.contextPath}/dist/foreEnd3/js/myscroll.js"></script>
    <link href="${pageContext.request.contextPath}/dist/foreEnd3/css/zhiweig.css" type="text/css" rel="stylesheet">
    <style>
        .navbar-bottom {
            background-color: rgba(85, 97, 101, 0.5);
            position: fixed;
            z-index: 99999;
            width: 100%;
            box-shadow: none;
        }
    </style>
    <!--导航透明度-->
    <%--<script src="${pageContext.request.contextPath}/dist/foreEnd3/js/script.js"></script>--%>


</head>
<body style="width: 100%;min-width: 1200px;height: 100%">

<jsp:include page="headerforeEnd_p.jsp"/>

<!--轮播-->
<header id="home_1" style="z-index: 4">
    <div class="banner">
        <div class="move" id="move1">
            <ul class="home_tul">
                <%--<li class="home_uli"><img src="${pageContext.request.contextPath}/dist/foreEnd3/img/lun8.jpg" class="img_eve"/></li>--%>
                <%--<li class="home_uli"><img src="${pageContext.request.contextPath}/dist/foreEnd3/img/lun7.jpg" class="img_eve"/></li>--%>
                <%--<li class="home_uli"><img src="${pageContext.request.contextPath}/dist/foreEnd3/img/lun2.jpg" class="img_eve"/></li>--%>
                <%--<li class="home_uli"><img src="${pageContext.request.contextPath}/dist/foreEnd3/img/lun3.jpg" class="img_eve"/></li>--%>
                <li class="home_uli">
                    <div class="home_imga"
                         style="background-image: url('${pageContext.request.contextPath}/dist/foreEnd3/img/lun7.jpg');background-size: cover"></div>
                </li>
                <li class="home_uli">
                    <div class="home_imga"
                         style="background-image: url('${pageContext.request.contextPath}/dist/foreEnd3/img/lun8.jpg');background-size: cover"></div>
                </li>
                <li class="home_uli">
                    <div class="home_imga"
                         style="background-image: url('${pageContext.request.contextPath}/dist/foreEnd3/img/lun1.jpg');background-size: cover"></div>
                </li>
                <li class="home_uli">
                    <div class="home_imga"
                         style="background-image: url('${pageContext.request.contextPath}/dist/foreEnd3/img/lun3.jpg');background-size: cover"></div>
                </li>
                <li class="home_uli">
                    <div class="home_imga"
                         style="background-image: url('${pageContext.request.contextPath}/dist/foreEnd3/img/lun4.jpg');background-size: cover"></div>
                </li>
                <li class="home_uli">
                    <div class="home_imga"
                         style="background-image: url('${pageContext.request.contextPath}/dist/foreEnd3/img/lun2.jpg');background-size: cover"></div>
                </li>
                <li class="home_uli">
                    <div class="home_imga"
                         style="background-image: url('${pageContext.request.contextPath}/dist/foreEnd3/img/lun5.jpg');background-size: cover"></div>
                </li>
                <li class="home_uli">
                    <div class="home_imga"
                         style="background-image: url('${pageContext.request.contextPath}/dist/foreEnd3/img/lun6.jpg');background-size: cover"></div>
                </li>
                <li class="home_uli">
                    <div class="home_imga"
                         style="background-image: url('${pageContext.request.contextPath}/dist/foreEnd3/img/lun9.jpg');background-size: cover"></div>
                </li>

            </ul>
        </div>
        <div class="ctrl" id="ctrl1"></div>
    </div>
</header>

<div class="index_all">

    <div class="index_00">
        <h3>最新职位发布</h3>

        <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/chang.png" alt="" class="index_ii0">

        <div class="pos_all">
            <ul>
                <c:forEach items="${postion}" var="po">
                <li class="pos_li">
                    <a href="${pageContext.request.contextPath}/Postion/selPostionInfo.do?postionId=${po.postionId}" class="pos_name">
                    <div class="pos_eve">
                        <div class="pos_left">
                            <h4>${po.postionName}</h4>
                            <div class="pos_small">
                                <span class="pos_money">
                                    <c:if test="${po.postionMm==-1}">
                                        面议
                                    </c:if>
                                <c:if test="${po.postionMm!=-1}">
                                    ${po.postionMm}
                                </c:if>
                                </span>
                                <span>${po.postionSpace}</span>
                                <span>${po.postionEducation}</span>
                                <span>${po.postionExp}</span>
                            </div>
                        </div>
                            <%--<a href="">--%>
                            <c:choose>
                                <c:when test="${po.company.companyPicture != undefined}">
                                    <img src="${pageContext.request.contextPath}/uploadImg/${po.company.companyPicture}"
                                         alt="" class="pos_img">
                                </c:when>
                                <c:otherwise>
                                    <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/circlehui.png" class="pos_img">
                                </c:otherwise>
                            </c:choose>
                        <%--</a>--%>
                    </div>
                    </a>
                </li>
                </c:forEach>
            </ul>
        </div>
    </div>

    <%--&lt;%&ndash;企业&ndash;%&gt;--%>
    <%--<div class="index_01">--%>
    <%--<h3>企业推荐</h3>--%>
    <%--<p>热门企业推荐，最新企业推荐</p>--%>
    <%--<div class="com_all">--%>
    <%--<ul>--%>
    <%--<li class="com_li">--%>
    <%--<div class="com_eve">--%>
    <%--<a href="#">--%>
    <%--<img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"--%>
    <%--class="com_img2">--%>
    <%--</a>--%>
    <%--<ul class="com_ul1">--%>
    <%--<li><a href="#" class="com_pos"><span class="com_circle"></span>Java高级工程师</a></li>--%>
    <%--<li><a href="#" class="com_pos"><span class="com_circle"></span>Web前端工程师</a></li>--%>
    <%--</ul>--%>
    <%--<div class="com_much">170个职位再招 <a href="" class="com_more">查看更多</a></div>--%>
    <%--<ul class="com_ul2">--%>
    <%--<li>五险一金</li>--%>
    <%--<li>带薪年假</li>--%>
    <%--</ul>--%>
    <%--</div>--%>
    <%--</li>--%>
    <%--<li class="com_li">--%>
    <%--<div class="com_eve">--%>
    <%--<a href="#">--%>
    <%--<img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"--%>
    <%--class="com_img2">--%>
    <%--</a>--%>
    <%--<ul class="com_ul1">--%>
    <%--<li><a href="#" class="com_pos"><span class="com_circle"></span>Java高级工程师</a></li>--%>
    <%--<li><a href="#" class="com_pos"><span class="com_circle"></span>Web前端工程师</a></li>--%>
    <%--</ul>--%>
    <%--<div class="com_much">170个职位再招 <a href="" class="com_more">查看更多</a></div>--%>
    <%--<ul class="com_ul2">--%>
    <%--<li>五险一金</li>--%>
    <%--<li>带薪年假</li>--%>
    <%--</ul>--%>
    <%--</div>--%>
    <%--</li>--%>
    <%--<li class="com_li">--%>
    <%--<div class="com_eve">--%>
    <%--<a href="#">--%>
    <%--<img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"--%>
    <%--class="com_img2">--%>
    <%--</a>--%>
    <%--<ul class="com_ul1">--%>
    <%--<li><a href="#" class="com_pos"><span class="com_circle"></span>Java高级工程师</a></li>--%>
    <%--<li><a href="#" class="com_pos"><span class="com_circle"></span>Web前端工程师</a></li>--%>
    <%--</ul>--%>
    <%--<div class="com_much">170个职位再招 <a href="" class="com_more">查看更多</a></div>--%>
    <%--<ul class="com_ul2">--%>
    <%--<li>五险一金</li>--%>
    <%--<li>带薪年假</li>--%>
    <%--</ul>--%>
    <%--</div>--%>
    <%--</li>--%>
    <%--<li class="com_li">--%>
    <%--<div class="com_eve">--%>
    <%--<a href="#">--%>
    <%--<img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"--%>
    <%--class="com_img2">--%>
    <%--</a>--%>
    <%--<ul class="com_ul1">--%>
    <%--<li><a href="#" class="com_pos"><span class="com_circle"></span>Java高级工程师</a></li>--%>
    <%--<li><a href="#" class="com_pos"><span class="com_circle"></span>Web前端工程师</a></li>--%>
    <%--</ul>--%>
    <%--<div class="com_much">170个职位再招 <a href="" class="com_more">查看更多</a></div>--%>
    <%--<ul class="com_ul2">--%>
    <%--<li>五险一金</li>--%>
    <%--<li>带薪年假</li>--%>
    <%--</ul>--%>
    <%--</div>--%>
    <%--</li>--%>
    <%--<li class="com_li">--%>
    <%--<div class="com_eve">--%>
    <%--<a href="#">--%>
    <%--<img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"--%>
    <%--class="com_img2">--%>
    <%--</a>--%>
    <%--<ul class="com_ul1">--%>
    <%--<li><a href="#" class="com_pos"><span class="com_circle"></span>Java高级工程师</a></li>--%>
    <%--<li><a href="#" class="com_pos"><span class="com_circle"></span>Web前端工程师</a></li>--%>
    <%--</ul>--%>
    <%--<div class="com_much">170个职位再招 <a href="" class="com_more">查看更多</a></div>--%>
    <%--<ul class="com_ul2">--%>
    <%--<li>五险一金</li>--%>
    <%--<li>带薪年假</li>--%>
    <%--</ul>--%>
    <%--</div>--%>
    <%--</li>--%>
    <%--<li class="com_li">--%>
    <%--<div class="com_eve">--%>
    <%--<a href="#">--%>
    <%--<img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"--%>
    <%--class="com_img2">--%>
    <%--</a>--%>
    <%--<ul class="com_ul1">--%>
    <%--<li><a href="#" class="com_pos"><span class="com_circle"></span>Java高级工程师</a></li>--%>
    <%--<li><a href="#" class="com_pos"><span class="com_circle"></span>Web前端工程师</a></li>--%>
    <%--</ul>--%>
    <%--<div class="com_much">170个职位再招 <a href="" class="com_more">查看更多</a></div>--%>
    <%--<ul class="com_ul2">--%>
    <%--<li>五险一金</li>--%>
    <%--<li>带薪年假</li>--%>
    <%--</ul>--%>
    <%--</div>--%>
    <%--</li>--%>
    <%--<li class="com_li">--%>
    <%--<div class="com_eve">--%>
    <%--<a href="#">--%>
    <%--<img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"--%>
    <%--class="com_img2">--%>
    <%--</a>--%>
    <%--<ul class="com_ul1">--%>
    <%--<li><a href="#" class="com_pos"><span class="com_circle"></span>Java高级工程师</a></li>--%>
    <%--<li><a href="#" class="com_pos"><span class="com_circle"></span>Web前端工程师</a></li>--%>
    <%--</ul>--%>
    <%--<div class="com_much">170个职位再招 <a href="" class="com_more">查看更多</a></div>--%>
    <%--<ul class="com_ul2">--%>
    <%--<li>五险一金</li>--%>
    <%--<li>带薪年假</li>--%>
    <%--</ul>--%>
    <%--</div>--%>
    <%--</li>--%>
    <%--<li class="com_li">--%>
    <%--<div class="com_eve">--%>
    <%--<a href="#">--%>
    <%--<img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"--%>
    <%--class="com_img2">--%>
    <%--</a>--%>
    <%--<ul class="com_ul1">--%>
    <%--<li><a href="#" class="com_pos"><span class="com_circle"></span>Java高级工程师</a></li>--%>
    <%--<li><a href="#" class="com_pos"><span class="com_circle"></span>Web前端工程师</a></li>--%>
    <%--</ul>--%>
    <%--<div class="com_much">170个职位再招 <a href="" class="com_more">查看更多</a></div>--%>
    <%--<ul class="com_ul2">--%>
    <%--<li>五险一金</li>--%>
    <%--<li>带薪年假</li>--%>
    <%--</ul>--%>
    <%--</div>--%>
    <%--</li>--%>
    <%--<li class="com_li">--%>
    <%--<div class="com_eve">--%>
    <%--<a href="#">--%>
    <%--<img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"--%>
    <%--class="com_img2">--%>
    <%--</a>--%>
    <%--<ul class="com_ul1">--%>
    <%--<li><a href="#" class="com_pos"><span class="com_circle"></span>Java高级工程师</a></li>--%>
    <%--<li><a href="#" class="com_pos"><span class="com_circle"></span>Web前端工程师</a></li>--%>
    <%--</ul>--%>
    <%--<div class="com_much">170个职位再招 <a href="" class="com_more">查看更多</a></div>--%>
    <%--<ul class="com_ul2">--%>
    <%--<li>五险一金</li>--%>
    <%--<li>带薪年假</li>--%>
    <%--</ul>--%>
    <%--</div>--%>
    <%--</li>--%>
    <%--<li class="com_li">--%>
    <%--<div class="com_eve">--%>
    <%--<a href="#">--%>
    <%--<img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"--%>
    <%--class="com_img2">--%>
    <%--</a>--%>
    <%--<ul class="com_ul1">--%>
    <%--<li><a href="#" class="com_pos"><span class="com_circle"></span>Java高级工程师</a></li>--%>
    <%--<li><a href="#" class="com_pos"><span class="com_circle"></span>Web前端工程师</a></li>--%>
    <%--</ul>--%>
    <%--<div class="com_much">170个职位再招 <a href="" class="com_more">查看更多</a></div>--%>
    <%--<ul class="com_ul2">--%>
    <%--<li>五险一金</li>--%>
    <%--<li>带薪年假</li>--%>
    <%--</ul>--%>
    <%--</div>--%>
    <%--</li>--%>
    <%--<li class="com_li">--%>
    <%--<div class="com_eve">--%>
    <%--<a href="#">--%>
    <%--<img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"--%>
    <%--class="com_img2">--%>
    <%--</a>--%>
    <%--<ul class="com_ul1">--%>
    <%--<li><a href="#" class="com_pos"><span class="com_circle"></span>Java高级工程师</a></li>--%>
    <%--<li><a href="#" class="com_pos"><span class="com_circle"></span>Web前端工程师</a></li>--%>
    <%--</ul>--%>
    <%--<div class="com_much">170个职位再招 <a href="" class="com_more">查看更多</a></div>--%>
    <%--<ul class="com_ul2">--%>
    <%--<li>五险一金</li>--%>
    <%--<li>带薪年假</li>--%>
    <%--</ul>--%>
    <%--</div>--%>
    <%--</li>--%>
    <%--<li class="com_li">--%>
    <%--<div class="com_eve">--%>
    <%--<a href="#">--%>
    <%--<img src="${pageContext.request.contextPath}/dist/foreEnd3/img/jiaolan.jpg"--%>
    <%--class="com_img2">--%>
    <%--</a>--%>
    <%--<ul class="com_ul1">--%>
    <%--<li><a href="#" class="com_pos"><span class="com_circle"></span>Java高级工程师</a></li>--%>
    <%--<li><a href="#" class="com_pos"><span class="com_circle"></span>Web前端工程师</a></li>--%>
    <%--</ul>--%>
    <%--<div class="com_much">170个职位再招 <a href="" class="com_more">查看更多</a></div>--%>
    <%--<ul class="com_ul2">--%>
    <%--<li>五险一金</li>--%>
    <%--<li>带薪年假</li>--%>
    <%--</ul>--%>
    <%--</div>--%>
    <%--</li>--%>
    <%--</ul>--%>

    <%--</div>--%>
    <%--</div>--%>

    <!--社区-->
    <div class="index_04">
        <h3>企业推荐</h3>
        <p>热门企业推荐，最新企业推荐</p>
        <ul class="index_list">
            <c:forEach var="c" items="${company}" >
                <li class="com_li">
                    <div class="com_eve">
                        <div style="min-height: 100px;overflow: hidden;">
                            <c:choose>
                                <c:when test="${c.companyPicture != undefined}">
                                    <img src="${pageContext.request.contextPath}/uploadImg/${c.companyPicture}"
                                         alt="" class="com_img3">
                                </c:when>
                                <c:otherwise>
                                    <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/huilogo.png" class="pos_img">
                                </c:otherwise>
                            </c:choose>
                            <%--<img src="${c.companyPicture}"--%>
                                 <%--class="com_img3">--%>
                        </div>
                        <ul class="com_ul1">
                            <c:forEach var="p" items="${c.postions}">
                                <li>
                                    <a href="#" class="com_pos"><span class="com_circle"></span>${p.postionName}</a>
                                </li>
                            </c:forEach>
                        </ul>
                        <div class="com_much">${c.pcount} 个职位正在热招</div>
                        <ul class="com_ul2">
                                <c:forEach var="w" items="${c.welfares}">
                                    <li> ${w.welfareName}</li>
                                </c:forEach>
                        </ul>
                    </div>

                    <div class="mask4">
                        <p class="index_04p">${c.companyName}</p>
                        <a href="${pageContext.request.contextPath}/CompanyInfo/selCompanyInf.do?companyId=${c.companyId}">点击查看</a>
                    </div>
                </li>
            </c:forEach>
        </ul>
    </div>

    <!--生态圈-->
    <div class="index_05">
        <h3>合作企业</h3>
        <p>为合作的企业提供各种全面服务</p>
        <div class="index_05all">
            <div class="circle_in">
                <div class="index_circle">
                    <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/suning.png" alt="" class="circle_i">
                </div>
            </div>
            <div class="circle_in">
                <div class="index_circle2">
                    <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/liantong.png" alt=""
                         class="circle_i2">
                </div>
            </div>
            <div class="circle_in">
                <div class="index_circle">
                    <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/yinhang.png" alt="" class="circle_i">
                </div>
            </div>
            <div class="circle_in">
                <div class="index_circle2">
                    <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/10086.png" alt="" class="circle_i2">
                </div>
            </div>
            <div class="circle_in">
                <div class="index_circle">
                    <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/huawei.png" alt="" class="circle_i">
                </div>
            </div>

            <div class="circle_in">
                <div class="index_circle2">
                    <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/xioami.png" alt="" class="circle_i2">
                </div>
            </div>
            <div class="circle_in">
                <div class="index_circle">
                    <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/xiecheng.png" alt=""
                         class="circle_i">
                </div>
            </div>

            <div class="circle_in">
                <div class="index_circle2">
                    <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/mafengwo.png" alt=""
                         class="circle_i2">
                </div>
            </div>
            <div class="circle_in">
                <div class="index_circle">
                    <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/dangdang.png" alt=""
                         class="circle_i">
                </div>
            </div>

            <div class="circle_in">
                <div class="index_circle2">
                    <img src="${pageContext.request.contextPath}/dist/foreEnd3/img/anju.png" alt="" class="circle_i2">
                </div>
            </div>

        </div>

    </div>

</div>


<jsp:include page="behindforeEnd.jsp"/>
<%--新的轮播--%>

<script type="text/javascript">
    $(function () {
        $('.banner').myscroll({
            picElem: $('#move1'), //图片父级
            ctrlElem: $('#ctrl1'), //控制条父级(包括小圆点和左右箭头)
            isLibs: true, //是否创建底部小圆点(样式均可自定义调整),默认向lib添加单独类名，详情见调用后dom结构
            isArrows: true, //是否创建左右箭头(样式均可自定义调整)
            autoPlay: true, //是否自动播放
            playTime: 4000, //自动播放间隔时间
            playSpeed: 700, //图片切换速度
            effect: 'top' //轮播的改变方式 top(向上) left(向左) fade(淡入淡出)
        });

    })
</script>
<%----%>


<script>
    "use strict";
    (function ($) {
        $(function () {
            $(".index_list li").bind("mouseenter mouseleave", function (e) {
                var w = $(this).width();
                var h = $(this).height();
                var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
                var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
                var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; //direction的值为“0,1,2,3”分别对应着“上，右，下，左”
                var eventType = e.type;
                var dirName = new Array('上方', '右侧', '下方', '左侧');
                var mask = $(this).children('.mask4');
                if (e.type == 'mouseenter') {
                    switch (direction) {
                        case 0:
                            mask.css({
                                top: -240,
                                left: 0
                            });
                            break;
                        case 1:
                            mask.css({
                                top: 0,
                                left: 240
                            });
                            break;
                        case 2:
                            mask.css({
                                top: 240,
                                left: 0
                            });
                            break;
                        case 3:
                            mask.css({
                                top: 0,
                                left: -240
                            });
                            break;
                    }
                    mask.stop(true).animate({
                        left: 0,
                        top: 0
                    }, 400);
                } else {
                    var end = {};
                    switch (direction) {
                        case 0:
                            end = {
                                top: -240,
                                left: 0
                            };
                            break;
                        case 1:
                            end = {
                                top: 0,
                                left: 240
                            };
                            break;
                        case 2:
                            end = {
                                top: 240,
                                left: 0
                            };
                            break;
                        case 3: {
                            end = {
                                top: 0,
                                left: -240
                            };
                            break;
                        }
                    }
                    mask.stop(true).animate(end, 500);
                }
            });
        });
    })(jQuery);
</script>


<!--风琴社区-->
<script src="${pageContext.request.contextPath}/dist/foreEnd3/js/anime.min.js"></script>
<script src="${pageContext.request.contextPath}/dist/foreEnd3/js/main.js"></script>

<%--职位--%>
<script>
    jQuery(".index_no").click(function () {
        jQuery(this).closest('li').fadeOut(500, function () {
            $(this).remove();
        });
        $(this).animate({
            right: '250px'
        });
    })
</script>
<script src="${pageContext.request.contextPath}/dist/foreEnd3/js/jquery.easing.1.3.js"></script>
<script src="${pageContext.request.contextPath}/dist/foreEnd3/js/zhiweig.js"></script>


</body>
</html>